<script type="text/javascript" src="/system/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/system/js/jquery-ui-1.8.1.custom.min.js"></script>
<style type="text/css">
.list{
  border:1px solid #828790;
  list-style-type:none;
  padding:0;
  min-height:13pt;
  padding:1pt;
  min-width:200px;
}
.list li{
  margin:0;
  padding: 0;
  font-family:Tahoma;
  font-size:11pt;
}
</style>
<table>
  <tr>
    <td>
      <h3>{LANG:NOT_USED}</h3>
        <ul class="list" id="DONTUSEDWIDGETS">
        {LOOP:DONTUSEDWIDGETS}
          <li style="cursor:move;">
            {VAR:WIDGETNAME}
            <input name="{VAR:WIDGETPATH}" value="{VAR:PLACE}" type="hidden" />
          </li>
        {/LOOP:DONTUSEDWIDGETS}
        </ul>
    </td>
    <td>
      <h3>{LANG:HIDDEN}</h3>
      <ul class="list" id="HIDDENWIDGETS">
        {LOOP:HIDDENWIDGETS}
          <li style="cursor:move;">
            {VAR:WIDGETNAME}
            <input name="{VAR:WIDGETPATH}" value="{VAR:PLACE}" type="hidden" />
          </li>
        {/LOOP:HIDDENWIDGETS}
      </ul>
    </td>
  </tr>
  <tr>
    <td>
      <h3>{LANG:COLUMN} 1</h3>
      <ul class="list" id="COLUMN1WIDGETS">
        {LOOP:COLUMN1WIDGETS}
          <li style="cursor:move;">
            {VAR:WIDGETNAME}
            <input name="{VAR:WIDGETPATH}" value="{VAR:PLACE}" type="hidden" />
          </li>
        {/LOOP:COLUMN1WIDGETS}
      </ul>
    </td>
    <td>
      <h3>{LANG:COLUMN} 2</h3>
      <ul class="list" id="COLUMN2WIDGETS">
        {LOOP:COLUMN2WIDGETS}
          <li style="cursor:move;">
            {VAR:WIDGETNAME}
            <input name="{VAR:WIDGETPATH}" value="{VAR:PLACE}" type="hidden" />
          </li>
        {/LOOP:COLUMN2WIDGETS}
      </ul>
    </td>
    <td>
      <h3>{LANG:COLUMN} 3</h3>
      <ul class="list" id="COLUMN3WIDGETS">
        {LOOP:COLUMN3WIDGETS}
          <li style="cursor:move;">
            {VAR:WIDGETNAME}
            <input name="{VAR:WIDGETPATH}" value="{VAR:PLACE}" type="hidden" />
          </li>
        {/LOOP:COLUMN3WIDGETS}
      </ul>
    </td>
  </tr>
</table>
<input name="save" type="submit" value="{LANG:CHANGE}" onclick="form.action='{VAR:URL}' ; target='_self' ; return true" />
<script type="text/javascript">
   $('.list').sortable({connectWith: '.list'});
   $('.list').bind("sortupdate", function(event, ui) {
     var index = -1;
     if(this.children.length > 0){
       for(var i=0;i<this.children.length;i++){
         this.children[i].childNodes[1].value = this.id + '|' + i;
       }
     }
   });
</script>